<script setup>
import {reactive, ref} from "vue";
import router from "@/router";
import request from "@/utils/request";
import {ElMessage} from "element-plus";

/**
 * 登录数据
 */
const data = reactive({
    form: {}
})

/**
 * 登录校验
 * @type {UnwrapNestedRefs<{accountNo: [{trigger: string, message: string, required: boolean},{min: number, max: number, trigger: string[], message: string}], accountPassword: [{trigger: string, message: string, required: boolean},{min: number, max: number, trigger: string[], message: string}]}>}
 */
const rules = reactive({
    accountNo: [
        {required: true, message: '请输入账号', trigger: 'blur'},
        {min: 1, max: 20, message: '账号的长度必须在1-20个字符之间', trigger: ['blur', 'change']},
    ],
    accountPassword: [
        {required: true, message: '请输入密码', trigger: 'blur'},
        {min: 6, max: 20, message: '密码的长度必须在6-20个字符之间', trigger: ['blur', 'change']},
    ]
})

/**
 * 登录表单验证
 * @type {Ref<any>}
 */
const formRef = ref()

// /**
//  * 按钮点击标记
//  * @type {Ref<UnwrapRef<boolean>>}
//  */
// const isLoading = ref(false)

const accountLogin = () => {
    // // 打开loading等待
    // isLoading.value = true;
    formRef.value.validate((valid) => {
        if (valid) {
            request.post(`/api/account/account-login`, data.form).then(res => {
                if (res.code === "200") {
                    // isLoading.value = true
                    ElMessage.success('登录成功')
                    localStorage.setItem("account-info", JSON.stringify(res.data))
                    const account = JSON.parse(localStorage.getItem('account-info') || '{}')
                    if (account.accountRoleName === "system-admin" || account.accountRoleName === "visitor-admin") {
                        router.push(`/manage/admin-account-admin`)
                    } else if (account.accountRoleName === "common-student" || account.accountRoleName === "visitor-student") {
                        router.push(`/manage/home`)
                    } else if (account.accountRoleName === "common-teacher" || account.accountRoleName === "visitor-teacher") {
                        router.push(`/manage/teacher-course-score-teacher`)
                    } else if (account.accountRoleName === "common-business" || account.accountRoleName === "visitor-business") {
                        router.push(`/manage/business-course-score-business`)
                    } else {
                        router.push(`/manage/order-class-admin-order-class-order-class-admin`)
                    }
                } else {
                    // isLoading.value = false
                    ElMessage.error('登录失败')
                }
            })
        }
    })
}
</script>

<template>
    <div>
        <div class="login-container">
            <div style="width: 350px;" class="login-box">
                <div style="font-weight: bold; font-size: 24px; text-align: center; margin-bottom: 30px;">登 录</div>
                <el-form :model="data.form" ref="formRef" :rules="rules">
                    <el-form-item porp="accountNo">
                        <el-input prefix-icon="User" v-model="data.form.accountNo"
                                  maxlength="20"
                                  placeholder="请输入账号"/>
                    </el-form-item>
                    <el-form-item porp="accountPassword">
                        <el-input prefix-icon="Lock" v-model="data.form.accountPassword"
                                  maxlength="20"
                                  show-password
                                  placeholder="请输入密码"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="accountLogin" type="primary" style="width: 100%;">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
                <div style="margin-top: 30px;">
                    <el-row style="margin-top: 5px">
                        <el-col :span="12" style="text-align: left">
                            <el-link @click="router.push(`/reset`)">忘记密码？</el-link>
                        </el-col>
                        <el-col :span="12" style="text-align: right">
                            <el-link @click="router.push(`/register`)">立即注册</el-link>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped>
.login-container {
    min-height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://s11.ax1x.com/2024/03/03/pFBeARf.png");
    background-size: cover;
}

.login-box {
    background-color: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 30px;
    border-radius: 10px;
}
</style>